<?php
/**
 * Created by PhpStorm.
 * User: dreamy
 * Date: 2019-05-15
 * Time: 11:14
 */
use yii\helpers\Html;
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title><?= \common\services\DomainExtraConfigService::getVal('name');?>-登录</title>
    <meta name="keywords" content="<?= $this->params['seoData']['keywords'] ?>">
    <meta name="description" content="<?= $this->params['seoData']['description'] ?>">
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/global.css">
</head>

<body>
<?=Html::cssFile('@web/static/css/index.css')?>

<?php echo $this->render('../public/ele.php');?>
<!--引入页面头部-->
<?=Html::jsFile('@web/static/js/jquery-3.4.1.min.js')?>
<div class="userbg">
<div class="container" id="loginBox" style="width: 500px; ">
    <template>
        <el-container v-loading="loginLoading">
           
            <el-main>
                <p style="text-align:center;"><a href="/"><img class="logo_img" src="<?= \common\services\DomainExtraConfigService::getVal('logoPath');?>" alt="<?= \common\services\DomainExtraConfigService::getVal('name');?>"></a></p><br /><br />
                <p class="meta-p">账号登录</p>
                <el-divider></el-divider>
                <el-form ref="loginForm" :model="loginForm" label-width="80px" id="loginForm" @keyup.native="checkForm('loginForm')">
                    <el-form-item label="手 机 号" prop="username" :rules="[{required: true, message: '手机号不能为空'}]">
                        <el-input prefix-icon="el-icon-user" v-model="loginForm.username" placeholder="请输入手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="登录密码" prop="password" :rules="[{required: true, message: '密码不能为空'}]">
                        <el-input prefix-icon="el-icon-lock" type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('loginForm')" id="loginBtn">登录</el-button>
                    </el-form-item>
                    <p><a href="/register" style="color:#409EFF;float:left">立即注册</a><a href="/forgetpass" style="color:#409EFF;float:right">忘记密码</a></p>
                    
                </el-form>
            </el-main>
        </el-container>
    </template>
</div>
    <?php echo $this->render('../public/footer.php')?>
</div>
<style>
body{
  background:url('/static/images/bg-01.jpg');
  width: 100%;  
  min-height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 15px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.public-footer .page-width{
    width: initial;
}
</style>
<script>
    new Vue({
        el:'#loginBox',
        data() {
            return {
                loginForm: {
                    username: '',
                    password: ''
                },
                loginLoading:false,
                loginBtnDisabled:true,
            }
        },
        mounted:function() {
            this.checkForm('loginForm');
        },
        methods: {
            checkForm(form){
                console.log('check');
                let that = this;
                if(that.loginForm.username!='' && that.loginForm.password!=''){
                    that.$refs[form].validate((valid) => {
                        that.loginBtnDisabled = valid ? false : true;
                    });
                }
            },
            submitForm(form) {
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        this.loginLoading = true
                        axios
                            .post('/api/public/login',{
                                username : this.loginForm.username,
                                password : this.loginForm.password,
                            })
                            .then(
                                response => {
                                    let result = response.data
                                    if(result.error_code!=0){
                                        this.$message({
                                            type: 'info',
                                            message: result.error_message
                                        });
                                        this.loginLoading = false
                                        return false
                                    }else {
                                        localStorage.setItem('loginToken',result.data.token)
                                        this.$message({
                                            type: 'success',
                                            message: '登录成功'
                                        });
                                        setTimeout(function () {
                                            window.location.href='/tally';
                                        },500)
                                    }
                                }
                            )
                            .catch(function (error) { // 请求失败处理
                                console.log(error);
                            });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        }
    })
</script>
</body>
</html>
